<template>
  <el-container style="border: solid 1px #5d7db3;margin: 35px;">
    <el-header style="background-color: #5d7db3; display: flex; align-items: center;margin-bottom: 20px;">
      <div class="title">
        <span>本周值班</span>
      </div>
    </el-header>
    <div>
      <el-main>
        <div>
          <el-table :data="scheduleTableData" border stripe :header-cell-class-name="headerBg"
                    @row-click="handleRowClick" :row-class-date="highlightRow">
            <el-table-column prop="weekName" label="日期" >
              <template slot-scope="scope">
                {{ getChineseWeek(scope.row.weekName) }}
              </template>
            </el-table-column>
            <el-table-column prop="shiftLeader" label="值班领导"></el-table-column>
            <el-table-column prop="commander" label="指挥长"></el-table-column>
            <el-table-column prop="combatAssistant" label="作战（安全）助理"></el-table-column>
            <el-table-column prop="politicalAssistant" label="政工助理"></el-table-column>
            <el-table-column prop="comAssistant" label="通信助理"></el-table-column>
            <el-table-column prop="xcAssistant" label="宣传助理"></el-table-column>
            <el-table-column prop="bzAssistant" label="保障助理"></el-table-column>
            <el-table-column prop="driver" label="驾驶员"></el-table-column>
            <el-table-column prop="infAssistant" label="信息助理"></el-table-column>
            <el-table-column prop="admAssistant" label="行政助理"></el-table-column>
            <el-table-column prop="fileAssistant" label="防火助理"></el-table-column>
            <el-table-column prop="vmAssistant" label="车管助理"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="success" @click="openEditDialog(scope.row)">编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <!-- 编辑行弹窗 -->
      <el-dialog :visible.sync="editDialogVisible" title="编辑" width="30%" :draggable="true"
                 custom-class="scrollable-dialog">
        <el-scrollbar wrap-class="scrollbar-wrap">
          <el-form :model="editForm" ref="editForm" :rules="rules" label-width="100px">
            <el-form-item label="值班领导" prop="shiftLeader">
              <el-input v-model="editForm.shiftLeader"></el-input>
            </el-form-item>
            <el-form-item label="指挥长" prop="commander">
              <el-input v-model="editForm.commander"></el-input>
            </el-form-item>
            <el-form-item label="作战（安全）助理" prop="combatAssistant">
              <el-input v-model="editForm.combatAssistant"></el-input>
            </el-form-item>
            <el-form-item label="政工助理" prop="politicalAssistant">
              <el-input v-model="editForm.politicalAssistant"></el-input>
            </el-form-item>
            <el-form-item label="通信助理" prop="comAssistant">
              <el-input v-model="editForm.comAssistant"></el-input>
            </el-form-item>
            <el-form-item label="宣传助理" prop="xcAssistant">
              <el-input v-model="editForm.xcAssistant"></el-input>
            </el-form-item>
            <el-form-item label="保障助理" prop="bzAssistant">
              <el-input v-model="editForm.bzAssistant"></el-input>
            </el-form-item>
            <el-form-item label="驾驶员" prop="driver">
              <el-input v-model="editForm.driver"></el-input>
            </el-form-item>
            <el-form-item label="信息助理" prop="information">
              <el-input v-model="editForm.infAssistant"></el-input>
            </el-form-item>
            <el-form-item label="行政助理" prop="admAssistant">
              <el-input v-model="editForm.admAssistant"></el-input>
            </el-form-item>
            <el-form-item label="防火助理" prop="fileAssistant">
              <el-input v-model="editForm.fileAssistant"></el-input>
            </el-form-item>
            <el-form-item label="车管助理" prop="vmAssistant">
              <el-input v-model="editForm.vmAssistant"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveEdit">保存</el-button>
              <el-button @click="editDialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </el-dialog>
    </div>
    <el-footer>
    </el-footer>
  </el-container>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      //从后端返回的数据
      scheduleTableData: [],
      editDialogVisible: false,
      editForm: {
        // weekId: '', // 代表星期几
        shiftLeader: '',
        commander: '',
        combatAssistant: '',
        politicalAssistant: '',
        comAssistant: '',
        xcAssistant: '',
        bzAssistant: '',
        driver: '',
        infAssistant: '',
        admAssistant: '',
        fileAssistant: '',
        vmAssistant: '',
      },
      selectedRow: null,
      rules: {
        // weekId: [{ required: true, message: '请输入日期', trigger: 'blur' }],
        shiftLeader: [{ required: true, message: '请输入值班领导', trigger: 'blur' }],
        commander: [{ required: true, message: '请输入指挥长', trigger: 'blur' }],
        combatAssistant: [{ required: true, message: '请输入作战（安全）助理', trigger: 'blur' }],
        politicalAssistant: [{ required: true, message: '请输入政工助理', trigger: 'blur' }],
        comAssistant: [{ required: true, message: '请输入通信助理', trigger: 'blur' }],
        xcAssistant: [{ required: true, message: '请输入宣传助理', trigger: 'blur' }],
        bzAssistant: [{ required: true, message: '请输入保障助理', trigger: 'blur' }],
        driver: [{ required: true, message: '请输入驾驶员', trigger: 'blur' }],
        infAssistant: [{ required: true, message: '请输入信息助理', trigger: 'blur' }],
        admAssistant: [{ required: true, message: '请输入行政助理', trigger: 'blur' }],
        fileAssistant: [{ required: true, message: '请输入防火助理', trigger: 'blur' }],
        vmAssistant: [{ required: true, message: '请输入车管助理', trigger: 'blur' }],
      },
      // 日期的映射规则
      dayMap : {
        Monday:'星期一',
        Tuesday:'星期二',
        Wednesday:'星期三',
        Thursday:'星期四',
        Friday:'星期五',
        Saturday:'星期六',
        Sunday:'星期日',
      },
      // 定义 headerBg
      headerBg: 'my-header-class',

    };

  },

  created() {
    this.fetchScheduleData();
  },
  methods: {
    formatDate(row) {
      return row.date;
    },
    //星期中英文映射
    getChineseWeek(weekName) {
      const weekMap = {
        Sunday: '星期日',
        Monday: '星期一',
        Tuesday: '星期二',
        Wednesday: '星期三',
        Thursday: '星期四',
        Friday: '星期五',
        Saturday: '星期六'
      };
      return weekMap[weekName];
    },
    // 选中变颜色
    handleRowClick(row) {
      this.selectedRow = row;
    },
    highlightRow(row) {
      return row === this.selectedRow ? 'highlight' : '';
    },
    //编辑行
    openEditDialog(row) {
      this.editDialogVisible = true;
      this.editForm = row;
    },
    fetchScheduleData() {
      // 连接后端接口，获取本周值班信息
      axios.get('duty1/getDutyWeek')
          .then((response) => {
            if (response && response.data.code === 200) {
              this.scheduleTableData = response.data.data;

              console.log("本周的值班信息为：",response.data.data);
            } else {
              this.$message.error('无法获取值班信息');
            }
          })
          .catch((error) => {
            console.error('获取值班信息失败:', error);
            this.$message.error('无法连接到后端');
          });
      console.log("本周的值班信息为：",this.scheduleTableData);

    },

    saveEdit() {
      // 首先验证表单是否有效
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          // 从选中行中提取周几
          const weekName = this.selectedRow.weekName;
          console.log("weekNAME",weekName);
          console.log("发送给后端的数据为：", this.selectedRow);

          // 构建后端的请求 URL
          const requestUrl = `/duty1/update/${weekName}`;
          // 仅发送与当前 `weekName` 相关的字段
          const dataToUpdate = {
            weekName: this.selectedRow.weekName, // 日期
            shiftLeader: this.editForm.shiftLeader, // 值班领导
            commander: this.editForm.commander, // 指挥长
            combatAssistant: this.editForm.combatAssistant, // 作战（安全）助理
            politicalAssistant: this.editForm.politicalAssistant, // 政工助理
            comAssistant: this.editForm.comAssistant, // 通信助理
            xcAssistant: this.editForm.xcAssistant, // 宣传助理
            bzAssistant: this.editForm.bzAssistant, // 保障助理
            driver: this.editForm.driver, // 驾驶员
            infAssistant: this.editForm.infAssistant, // 信息助理
            admAssistant: this.editForm.admAssistant, // 行政助理
            fileAssistant: this.editForm.fileAssistant, // 防火助理
            vmAssistant: this.editForm.vmAssistant, // 车管助理
          };

          // 发送 POST 请求，将 editForm 数据作为 JSON 发送
          this.$Axios.put(requestUrl, dataToUpdate)
              .then(response => {
                console.log('数据成功发送至后端:', response);

                if (response.data.code === 200) {
                  // 如果成功，更新本地数据
                  const index = this.scheduleTableData.indexOf(this.selectedRow);
                  this.scheduleTableData[index] = { ...this.scheduleTableData[index], ...dataToUpdate };


                  // 复位编辑表单
                  this.editForm = {
                    weekName: '', // 日期
                    shiftLeader: '', // 值班领导
                    commander: '', // 指挥长
                    combatAssistant: '', // 作战（安全）助理
                    politicalAssistant: '', // 政工助理
                    comAssistant: '', // 通信助理
                    xcAssistant: '', // 宣传助理
                    bzAssistant: '', // 保障助理
                    driver: '', // 驾驶员
                    infAssistant: '', // 信息助理
                    admAssistant: '', // 行政助理
                    fileAssistant: '', // 防火助理
                    vmAssistant: '', // 车管助理
                  };

                  // 关闭编辑对话框
                  this.editDialogVisible = false;
                }
              })
              .catch(error => {
                console.error('发送数据至后端时出错:', error);
                this.editDialogVisible = false;
                console.log("发送给后端的表单为：",this.scheduleTableData);
                this.$message('编辑功能出现异常');
              });
        }
      });
    }

  },
};
</script>
<style scoped>
.title {
  font-size: 30px;
  font-family: 500;
  color: aliceblue;
}

.highlight {

  background-color: lightblue;
}

.scrollable-dialog .el-dialog__body {
  display: flex;
  flex-direction: row;
}

.scrollable-dialog .el-scrollbar {
  height: 100%;
  width: 100%;
  padding-right: 2px;
}

.scrollable-dialog .scrollbar-wrap {
  height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}
</style>